import { useState } from 'react'
import { useNavigate } from 'react-router-dom'

export default function MyUsers() {
  const navigate = useNavigate()

  // 用户的列表数据
  const [userlist] = useState([
    { id: 1, name: '嬴政', age: 18, position: '始皇帝' },
    { id: 2, name: '李斯', age: 35, position: '丞相' },
    { id: 3, name: '吕不韦', age: 50, position: '商人' },
    { id: 4, name: '赵姬', age: 48, position: '王太后' }
  ])

  return (
    <div>
      {/* 标题 */}
      <h4 className="text-center">用户管理</h4>

      {/* 用户列表 */}
      <table className="table table-bordered table-striped table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>头衔</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {/* 循环渲染用户列表数据 */}
          {userlist.map((item, i) => (
            <tr key={item.id}>
              <td>{i + 1}</td>
              <td>{item.name}</td>
              <td>{item.age}</td>
              <td>{item.position}</td>
              <td style={{ cursor: 'pointer' }} onClick={() => navigate(`/users/` + item.id)}>
                详情
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
